<template>
  <!-- 表单 -->
  <el-form :inline="true" :model="taskFrom" class="demo-form-inline task-form-contain" ref="taskFromRef">
    <el-form-item label="任务名称" prop="taskName">
      <el-input v-model="taskFrom.name" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="产品名称" prop="productName">
      <el-input v-model="taskFrom.productName" placeholder="请输入" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="taskSearchBtn">搜索</el-button>
      <el-button @click="taskSearchReset">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 按钮 -->
  <div class="task-operate-btn">
    <el-button type="primary" @click="addTask">新增</el-button>
    <el-button @click="exportBtn">导出</el-button>
  </div>
  <!-- 表格 -->
  <el-table :data="taskData" style="width: 100%" :cell-style="{textAlign:'center'}" :header-cell-style="{'text-align': 'center',background:'#fafafa',color:'#606266' }">
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="name" label="任务名称" />
    <el-table-column prop="productName" label="产品名称" />
    <el-table-column prop="totalCount" label="已选择数量" />
    <el-table-column prop="sendCount" label="已发送数量" />
    <el-table-column prop="status" label="状态">
      <template #default="{row}">
        <span v-if="row.status == 0">已暂停</span>
        <span v-if="row.status == 1">执行中</span>
        <span v-if="row.status == 2">已完成</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200px">
      <template #default="{row}">
        <el-button type="primary" link @click="view(row.id)">查看</el-button>
          <el-popconfirm title="你确定要删除吗?" @confirm="del(row.id)">
            <template #reference>
              <el-button type="primary" link>删除</el-button>
            </template>
          </el-popconfirm>
        <el-button type="primary" link v-if="row.status == 1" @click="switchStatusA(row.id, 0)">暂停</el-button>
        <el-button type="primary" link v-if="row.status == 0" @click="switchStatusB(row.id, 1)">启动</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      layout="prev, pager, next, jump, sizes"
      :total="total"
      background 
      class="mt-4"
    />
  <!-- 新增抽屉 -->  
  <el-drawer v-model="increaseDrawer" size="65%" title="新增任务">
    <IncreaseProduct ref="refC" :productSelect="productSelect" :timeInfo="timeInfo" @triggersInitList="taskSearchBtn" />
    <template #footer>
      <el-button @click="increaseDrawer= false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-drawer>
  <!-- 查看抽屉 -->
  
  <el-drawer v-model="findOutMore" size="65%" title="详情">
    <viewInfo :deliverDetail="deliverDetail"/>
    <template #footer>
      <el-button @click="findOutMore = false">取消</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref,onMounted,watch,nextTick } from 'vue';
import IncreaseProduct from "./components/IncreaseProduct.vue"
import viewInfo from "./components/viewInfo.vue"
import { ElMessage } from 'element-plus'
import {getProductList,getAddProduct,getTimeInfo,getDetailInfo,delInfo,switchOption,exportTask} from "@a/task"
defineOptions({
  name: "TaskInformation",
});
const taskFrom = reactive({
  name: "",
  productName: "",
});
const findOutMore = ref(false)
const refC = ref<any>(null);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10); 
const taskFromRef = ref<any>(null)
const taskData = ref<any>([])
// 导出
const exportBtn = ()=>{
  exportTask({}).then((res:any)=>{
    console.log(res);
  })
}
// 切换操作
const switchStatusA = (id:any,status:any)=>{
  switchOption(id,{status}).then((res:any)=>{
      if(res.code === 10000){
        ElMessage({
        type: "success",
        message: res.msg,
        onClose: ()=>{
          getTaskList({})
        }
      })
      }
  })
}
const switchStatusB = (id:any,status:any)=>{
  switchOption(id,{status}).then((res:any)=>{
     if(res.code === 10000){
      ElMessage({
        type: "success",
        message: res.msg,
        onClose: ()=>{
          getTaskList({})
        }
      })
     }
  })
}
// 删除操作
const deleteTaskInfo = (id:any) =>{
  delInfo(id).then((res:any)=>{
     if(res.code === 10000){
      ElMessage({
        type: "success",
        message: res.msg,
        onClose: ()=>{
          getTaskList({})
        }
      })
     }
  })
}
const del = (val:any)=>{
  deleteTaskInfo(val)
}
// 初次请求列表
const getTaskList = (taskFrom:any)=>{
  getProductList(taskFrom).then((res:any)=>{
   if(res.code === 10000){
    taskData.value = res.result.records
   }
  })
}
// 请求按钮
const taskSearchBtn = ()=>{
  getTaskList(taskFrom);
}
// 分页请求
watch([page, pageSize], (val) => {
  const current = val[0]
  const size = val[1]
  getTaskList({current,size});
});
// 重置
const taskSearchReset = ()=>{
  taskFromRef.value.resetFields()
}
// 新增
const increaseDrawer = ref(false)
const addTask = ()=>{
  increaseDrawer.value = !increaseDrawer.value
  nextTick(()=>{
    refC.value.show()
})
}
//定义数组
let productSelect:Array<any> = []
// 请求新增子组件中的产品类别
const addProductCate = ()=>{
  getAddProduct().then((res:any)=>{
    if(res.code === 10000){
      productSelect = res.result
    }
  })
}
// 定义一个值准备传给新增
const timeInfo = ref({})
// 发送请求，拿到子组件需要渲染的时间数据
const getSendTime = ()=>{
  getTimeInfo().then((res:any)=>{
    if(res.code === 10000){
      timeInfo.value = res.result
    }
  })
}
const save = ()=>{
  refC.value.subInfo()
  increaseDrawer.value = false
}
const deliverDetail = ref({})
const detailedData = (id:any)=>{
  getDetailInfo(id).then((res:any)=>{
     if(res.code === 10000){
      deliverDetail.value = res.result
     }
  })
} 
const view = (val:any)=>{
  findOutMore.value = true
  detailedData(val)
}

// 初始化钩子的位置，发请求
onMounted(()=>{
  getTaskList({})
  addProductCate()
  getSendTime()
})
</script>

<style scoped lang="scss">
.task-operate-btn {
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-pagination{
  display: flex;
  margin-top: 14px;
  margin-bottom: 14px;
  justify-content: flex-end;
  margin-right: 10px;
}
</style>